/*
 * @Author: your name
 * @Date: 2021-12-22 15:41:19
 * @LastEditTime: 2021-12-22 16:16:43
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \first_one_file\react-travel\src\components\productIntro\Productintro.tsx
 */
import React from 'react';
import {
  Typography,
  Carousel,
  Image,
  Rate,
  Table
} from 'antd';
import { ColumnsType } from 'antd/es/table';
import styles from './ProductIntro.module.css';

interface PropsType {
  title: string;
  shortDescription: string;
  price: string | number;
  coupons: string;
  points: string;
  discount: string;
  rating: string | number;
  pictures: string[];
}

interface RowType {
  title: string;
  description: string | number | JSX.Element;
  key: number;
}

const columns: ColumnsType<RowType> = [
  {
    title: "title",
    dataIndex: "title",
    key: "title",
    align: "left",
    width: 120,
  },
  {
    title: "description",
    dataIndex: "description",
    key: "description",
    align: "center",
  },
];

export const ProductIntro: React.FC<PropsType> = ({
  title,
  shortDescription,
  price,
  coupons,
  discount,
  rating,
  pictures,
}) => {

  const tableDataSource: RowType[] = [
    {
      key: 0,
      title: "路线名称",
      description: title,
    },
    {
      key: 1,
      title: "价格",
      description: (
        <>
          ¥{" "}
          <Typography.Text type="danger" strong>
            {price}
          </Typography.Text>
        </>
      ),
    },
    {
      key: 2,
      title: "限时抢购折扣",
      description: discount ? (
        <>
          ¥ <Typography.Text delete>{price}</Typography.Text>{" "}
          <Typography.Text type="danger" strong>
            ¥ {discount}
          </Typography.Text>
        </>
      ) : (
        "暂无折扣"
      ),
    },
    {
      key: 2,
      title: "领取优惠",
      description: coupons ? discount : "无优惠券可领",
    },
    {
      key: 2,
      title: "线路评价",
      description: (
        <>
          <Rate allowHalf defaultValue={+rating} />
          <Typography.Text style={{ marginLeft: 10 }}>
            {rating} 星
          </Typography.Text>
        </>
      ),
    },
  ]

  return (
    <div className={styles['intro-container']}>
    <Typography.Title level={4}>{title}</Typography.Title>
    <Typography.Text>{shortDescription}</Typography.Text>
    <div className={styles['intro-detail-content']}>
      <Typography.Text style={{ marginLeft: 20 }}>
        ￥<span className={styles['intro-detail-strong-text']}>{price}</span>
      </Typography.Text>
      <Typography.Text style={{ marginLeft: 50 }}>
        ￥<span className={styles['intro-detail-strong-text']}>{rating}</span>分
      </Typography.Text>
    </div>
    <Carousel autoplay slidesToShow={3}>
      {pictures.map(p => {
        <Image height={150} src={p} />
      })}
    </Carousel>
    <Table<RowType>
      columns={columns}
      dataSource={tableDataSource}
      size="small"
      bordered={false}
      pagination={false}
      showHeader={false}
    />
  </div>
  );
};
